<template>
  <div class="seedemo-box">
    <!-- 每日施工进度反馈 -->
    <div>
      <!-- （施工单位填写） -->
      <div class="item-title">每日施工进度反馈</div>
      <el-row class="row-bgg">
        <el-row style="width: 100%">
          <el-col class="disflexend" :span="4">施工情况:</el-col>
          <el-col :span="4">{{ feedBackRecord.constructionSituation }}</el-col>
          <el-col class="disflexend" :span="4">施工进度:</el-col>
          <el-col :span="4"> {{ feedBackRecord.constructionProgress }}</el-col>
          <el-col class="disflexend" :span="4">参与人员:</el-col>
          <el-col :span="4">
            <span v-if="feedBackRecord.participant">
              <span v-for="(item3, index3) in feedBackRecord.participant" :key="index3">
                {{ item3.name }}
              </span>
            </span>
            <span v-else></span>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col class="disflexend" :span="4">现场情况:</el-col>
          <el-col :span="20">
            <span v-for="(item, index) in feedBackRecord.scenePhoto" :key="index">
              <el-image class="imageurl" :src="item.url" fit="fit" :preview-src-list="[item.url]"/>
            </span>
          </el-col>
        </el-row>
      </el-row>
    </div>
    <!-- 每日施工检查 -->
    <div>
      <!-- （监管单位-楼宇管理科填写） -->
      <div class="item-title">每日施工检查</div>
      <!-- 检查内容 -->
      <el-row>
        <el-row style="font-weight: bold; width: 100%;margin-bottom: 10px;">检查内容</el-row>
        <el-row style="width: 100%">
          <el-col class="disflexend" :span="2"> 检查内容描述：</el-col>
          <el-col :span="18">
            <div class="item-content">{{ supervisoryFormContentRecord.examContent }}</div>
          </el-col>
        </el-row>
        <el-row style="width: 100%;margin-top: 10px">
          <el-col class="disflexend" :span="2">现场情况：</el-col>
          <el-col :span="18">
            <el-image v-for="(item1, index1) in supervisoryFormContentRecord.situation" :key="index1" class="imageurl"
              :src="item1.url" fit="fit" :preview-src-list="[item1.url]" /></el-col>
        </el-row>
      </el-row>
      <!-- 异常情况 -->
      <el-row style="width: 100%" v-for="(item, index) in supervisoryFormContentRecord.abnormalities" :key="index">
        <el-row style="font-weight: bold; width: 100%;margin-bottom: 10px;">异常情况{{index + 1}}</el-row>
        <el-row style="width: 100%">
          <el-col class="disflexend" :span="2"> 异常情况描述：</el-col>
          <el-col :span="18">
            <div class="item-content">{{ item.description }}</div>
          </el-col>
        </el-row>
        <el-row style="width: 100%;margin-top: 10px">
          <el-col class="disflexend" :span="2">现场情况：</el-col>
          <el-col :span="18">
            <el-image v-for="(item1, index1) in item.videoOrPics" :key="index1" class="imageurl" :src="item1.url"
              fit="fit" :preview-src-list="[item1.url]" /></el-col>
        </el-row>
      </el-row>
      <!-- 违规情况 -->
      <el-row style="width: 100%;margin-top: 10px" v-for="(item, index) in supervisoryFormContentRecord.violations" :key="index">
        <el-row style="font-weight: bold; width: 100%;margin-bottom: 10px;">
          违规情况
          {{ index + 1 }}
        </el-row>
        <el-row style="width: 100%">
          <el-col class="disflexend" :span="2"> 违规情况描述：</el-col>
          <el-col :span="18"> 
            <div class="item-content">{{ item.description }}</div>
          </el-col>
        </el-row>
        <el-row style="width: 100%;margin-top: 10px">
          <el-col class="disflexend" :span="2">现场情况：</el-col>
          <el-col :span="18">
            <el-image v-for="(item1, index1) in item.videoOrPics" :key="index1" class="imageurl" :src="item1.url"
              fit="fit" :preview-src-list="[item1.url]"/></el-col>
        </el-row>
      </el-row>
      <!-- 视频监控 -->
      <el-row style="margin-top: 12px">
        <videoMonitoring />
      </el-row>
      <!-- 返回 -->
      <el-row style="margin-top: 12px">
        <el-col :span="12"> </el-col>
        <el-button plain @click="goDetails">返回</el-button>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  getFormAndFeedback, //查看
  PageListType,
} from "@/api/construction/projectSupervise";
import { useRoute } from "vue-router";

import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import videoMonitoring from "@/views/construction/project-supervise/components/videoMonitoring/index.vue";
import router from "@/router";
const route = useRoute();

const url =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
//返回
const goDetails = () => {
  router.push("/construction/project-supervise");
};
const feedBackRecord = reactive({
  constructionSituation: "", //施工情况
  constructionProgress: "", //施工进度
  participant: "", //参与人员
  scenePhoto: [], //现场情况
}); //施工情况

const supervisoryFormContentRecord = reactive({
  type: "", //状态
  examContent: "", //检查内容
  situation: [], //现场图片
  violations: [], //	违规情况
  abnormalities: [], //异常情况
}); //异常情况和违规情况

//初始化加载
onBeforeMount(() => {
  getFormAndFeedback(route.query.id)
    .then((res) => {
      supervisoryFormContentRecord.type =
        res.data.supervisoryFormContentRecord.type;
      supervisoryFormContentRecord.examContent =
        res.data.supervisoryFormContentRecord.examContent;
      supervisoryFormContentRecord.situation =
        res.data.supervisoryFormContentRecord.situation;
      supervisoryFormContentRecord.violations =
        res.data.supervisoryFormContentRecord.violations;
      supervisoryFormContentRecord.abnormalities =
        res.data.supervisoryFormContentRecord.abnormalities;
      if (res.data.feedBackRecord) {
        feedBackRecord.constructionSituation =
          res.data.feedBackRecord.constructionSituation;
        feedBackRecord.constructionProgress =
          res.data.feedBackRecord.constructionProgress;
        feedBackRecord.scenePhoto = res.data.feedBackRecord.scenePhoto;
        feedBackRecord.participant = res.data.feedBackRecord.participant;
      }
    })
    .catch((error) => {
      ElMessage.error("请求失败联系管理员");
    });
});

onMounted(() => { });
defineExpose({});
</script>

<style lang="less" scoped>
.seedemo-box {
  margin: 12px;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  .desc-item {
    border: #000 1px solid !important;
  }
  .imageclass {
    border: #000 1px solid;
  }
  .item-title {
    padding: 15px 0;
    font-size: 16px;
    font-weight: bold;
    color: #353a42;
    line-height: 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(0 0 0 / 11.8%);

    // .row-bg {
    //   width: 100%;
    //   margin: 0 !important;
    //   overflow: hidden;

    //   .items {
    //     display: flex;
    //     margin-bottom: 16px;

    //     .item-label {
    //       width: 100px;
    //       font-size: 14px;
    //       color: #989daa;
    //       line-height: 22px;
    //     }

    //     .item-value {
    //       font-size: 14px;
    //       color: #535862;
    //       line-height: 22px;
    //     }
    //   }
    // }
  }
  .item-content {
    word-wrap: break-word;
    white-space: wrap;
  }
  .row-bgg {
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    // border: 1px solid #000;
  }
}
.disflex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.disflexend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.imageurl {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  margin-right: 10px;
}
</style>